<template>
  <div>
    <el-table :data="table.tableData" border height="600px" stripe row-key="id"
              :header-cell-style="{ background: '#eef1f6',color: '#606266',textAlign:'center',fontWeight:'bold',borderWidth:'3px'}">
      <el-table-column prop="roomName" label="会议室名称" min-width="125"/>
      <el-table-column prop="title" label="会议名称" min-width="125"/>
      <el-table-column prop="remark" label="会议简介" min-width="125"/>
      <el-table-column label="会议时间" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.meetingDate }} {{ scope.row.startTime }} - {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="60px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleSignIn">签到</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px;float: right"
      layout="total,sizes,prev,pager,next,jumper"
      :page-size="table.pageConfig.size ? table.pageConfig.size : 10"
      :page-sizes="[5, 10, 15, 20]"
      :total="table.pageConfig.total"
      :current-page.sync="table.pageConfig.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import {findByDeptId} from "@/api/staffRoom";
import moment from 'moment';
export default {
  data() {
    return {
      staff: JSON.parse(localStorage.getItem("staff")),
      table: {
        tableData: [],
        pageConfig: {
          total: 10, // 记录总数
          current: 1, // 起始页
          size: 10 // 每页展示的记录数
        }
      },
    };
  },
  created() {
    this.loading()
  },
  computed: {

  },
  methods: {
    handleSignIn() {

    },
    loading() {
      findByDeptId({
        current: this.table.pageConfig.current,
        size: this.table.pageConfig.size,
        id: this.staff.deptId
      }).then(response => {
        if (response.code === 200) {
          this.table.tableData = response.data.list
          this.table.pageConfig.total = response.data.total
        } else {
          this.$message.error(response.message)
        }
      })
    },
    handleSizeChange(size) {
      this.table.pageConfig.size = size
      this.loading()
    },
    handleCurrentChange(current) {
      this.table.pageConfig.current = current
      this.loading()
    },
  }
};
</script>

<style>
.bottom {
  margin-top: 10px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.training-image {
  max-width: 100%;
  max-height: 200px;
}

.el-drawer__header {
  padding: 0 !important;
  margin-bottom: 10px !important;
}
</style>
